<script setup lang="ts">
  import { computed, ref, watch } from 'vue'

  const props = defineProps<{
    type?: 'primary' | 'success' | 'warning' | 'error' | 'info'
    height?: number
    paddingLr?: number
    color?: string
  }>()

  // 状态类型
  const statusType = ref<'primary' | 'success' | 'warning' | 'error' | 'info'>('primary')

  // 状态容器的样式
  const hStatusStyle = computed(() => {
    let result = `height: ${props.height || 24}px; padding: 0px ${props.paddingLr || 8}px;`
    props.color && (result += `color: ${props.color};`)
    return result
  })

  watch(
    props,
    (value) => {
      if (['primary', 'success', 'warning', 'error', 'info'].includes(value.type)) {
        statusType.value = value.type
      }
    },
    { immediate: true },
  )
</script>

<template>
  <div :class="['h_status', statusType]" :style="hStatusStyle">
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
  .h_status {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #f2f6fc;
    width: fit-content;
    font-size: 12px;
    white-space: nowrap;
  }

  .primary {
    color: $primaryColor;
  }

  .success {
    color: $secondColor3;
  }

  .warning {
    color: $secondColor2;
  }

  .error {
    color: $deleteColor;
  }

  .info {
    color: #909399;
  }
</style>
